<!DOCTYPE html>
<!-- saved from url=(0074)https://www.17sucai.com/preview/1527619/2019-05-15/Verification/index.html -->
<html lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	<title>手机绑定</title>
	<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta content="black" name="apple-mobile-web-app-status-bar-style">
	<meta content="telephone=no" name="format-detection">
	<link href="./style.css" rel="stylesheet" type="text/css">

</head>

<body>
	<section class="aui-flexView">
		<section class="aui-scrollView">
			<div class="aui-ver-form">
				<h2>手机号绑定</h2>
				<div class="aui-flex">
					<div class="aui-flex-box">
						<i class="icon icon-phone"></i>
						<input id="phone1" type="number" autocomplete="off" placeholder="手机号码">
					</div>
				</div>
				<div class="aui-flex">
					<div class="aui-flex-box">
						<i class="icon icon-code"></i>
						<input id="code1" type="number" autocomplete="off" placeholder="验证码">
					</div>
					<div class="aui-button-code">
						<input id="btnSendCode1" type="button" class="btn btn-default" value="获取验证码"
							onclick="sendMessage1()">
					</div>
				</div>
				<div class="aui-ver-button">
					<button onclick="binding()">确定</button>
				</div>


			</div>

		</section>
	</section>

	<script type="text/javascript" src="./jquery.min.js(1).下载"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script type="text/javascript">
		var http = localStorage.getItem("http");
		var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/;
		var count = 60;
		var InterValObj1;
		var curCount1;
		var Yzm;

		function sendMessage1() {
			curCount1 = count;
			var phone = $.trim($('#phone1').val());
			localStorage.setItem("phonef", phone)
			if (!phoneReg.test(phone)) {
				alert(" 请输入有效的手机号码");
				return false;
			}
			axios.get(http + '/sendSms?phoneNumber=' + phone)
				.then(function (response) {
					localStorage.setItem("Yzm", response.data.msg);
				})
				.catch(function (error) {
					console.log(error);
				});
			$("#btnSendCode1").attr("disabled", "true");
			$("#btnSendCode1").css("background", "grey");
			$("#btnSendCode1").val(+curCount1 + "秒再获取");
			InterValObj1 = window.setInterval(SetRemainTime1, 1000);

		}

		function SetRemainTime1() {
			if (curCount1 == 0) {
				window.clearInterval(InterValObj1);
				$("#btnSendCode1").removeAttr("disabled");
				$("#btnSendCode1").css("background", "#08acee");
				$("#btnSendCode1").val("重新发送");
			} else {
				curCount1--;
				$("#btnSendCode1").val(+curCount1 + "秒再获取");
			}
		}

		function binding() {
			var phonef = localStorage.getItem("phonef")
			var phone = $.trim($('#phone1').val());
			var code = $.trim($('#code1').val());
			var userId = localStorage.getItem('userId')
			Yzm = localStorage.getItem("Yzm");
			if (code == Yzm && phonef == phone) {
				axios.get(http + '/addPhoneNumber', {
						params: {
							"phoneNumber": phone,
							"userId": userId
						}
					})
					.then(function (response) {
						if (response.data.code == 200) {
							alert("绑定成功")
							localStorage.setItem("phonef", phone);

							window.location.href = "../Userlist/Userlist.html"
						}
					})

			} else {
				alert("请输入正确的手机号和验证码")
			}
			localStorage.removeItem("Yzm")
		}
	</script>


</body>

</html>